<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * BOM:
         *  -浏览器对象模型
         *  -BOM可以使我们通过js来操作浏览器
         *  -在BOM中为我们提供了一组对象，用来完成浏览器的操作
         *  -BOM对象：
         *      window
         *        -代表的是整个浏览器的窗口，同时window也是
         *      Navigator
         *      Location
         *      History
         *      Screen
         */

        // ===== window 对象 =====
        console.log("窗口内部宽度:", window.innerWidth);
        console.log("窗口内部高度:", window.innerHeight);

        window.onresize = function () {
            console.log("窗口大小改变了");
        };

        // ===== navigator 对象 =====
        console.log("用户代理信息:", navigator.userAgent);
        console.log("操作系统平台:", navigator.platform);
        console.log("是否启用 Cookie:", navigator.cookieEnabled);

        // ===== location 对象 =====
        console.log("当前 URL:", location.href);
        console.log("主机名:", location.hostname);
        console.log("路径名:", location.pathname);
        console.log("查询参数:", location.search);

        // ===== history 对象 =====
        // 注意：不能主动调用 back/forward 太频繁，否则可能引起页面跳转混乱
        // 可以绑定按钮来测试
        console.log("历史记录长度:", history.length);

        // ===== screen 对象 =====
        console.log("屏幕宽度:", screen.width);
        console.log("屏幕高度:", screen.height);
        console.log("可用宽度（不含任务栏）:", screen.availWidth);
        console.log("颜色深度:", screen.colorDepth);

        // ===== 综合练习：显示“返回顶部”按钮 =====
        window.onscroll = function () {
            if (window.scrollY > 100) {
                document.getElementById("backToTop").style.display = "block";
            } else {
                document.getElementById("backToTop").style.display = "none";
            }
        };

        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
    </script>

</head>
<body>
<button id="backToTop" onclick="scrollToTop()"
        style="display:none; position:fixed; right:20px; bottom:20px; z-index:999;">回到顶部
</button>

</body>
</html>
